<template>
  <div class="demo-autocomplete">
    <el-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      :placeholder="placeholder"
      @select="handleSelect"
      :trigger-on-focus="triggerOnFocus"
      value-key="name"
      clearable
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-autocomplete>
</div>
</template>

<script>
  export default {
    props:{
      list:{   // 建议数据
        type: Array,
        default:[]
      },
      placeholder:{     // 输入框提示信息
        type: String,
        default: '请输入内容'
      },
      triggerOnFocus:{  // 建议激活的方式  true:获取焦点就激活   false:输入才激活
        type: Boolean,
        default: true,
      },
      preciseQuery:{   // 是否是精确查询  true:是  false:否
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        restaurants: [],
        state1: '',
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          // 判断是否是精确查询
          if(this.preciseQuery) {
            // 精确查询
            return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          } else {
          // 模糊查询
            return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
          }
        };
      },
      loadAll() {
        return this.list;
      },
      handleSelect(item) {
        console.log(item);
        this.$parent.val = 'hiuhgiu'
        console.log(123456,this.$parent.val);
    
      }
    },
    mounted() {
      console.log('this.list-',this.list);
      this.restaurants = this.list;
    }
  }
</script>
<style lang="less" scoped>
  .demo-autocomplete {
    display: inline;
  }
</style>